<template>
  <!-- 操作日志 -->
  <div class="aui-card--fill scroll-box card-box">
    <div class="mod-sys__log-operation pane-shell">
      <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               :rules="dataRule"
               ref="dataForm"
               @keyup.enter.native="search">
        <el-form-item prop="AL_creatorName">
          <el-input v-model.trim="dataForm.AL_creatorName"
                    :placeholder="$t('logLogin.creatorName')"
                    clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select filterable
                     v-model.trim="dataForm.status"
                     :placeholder="$t('logOperation.status')"
                     clearable>
            <el-option :label="$t('logOperation.status0')"
                       :value="0"></el-option>
            <el-option :label="$t('logOperation.status1')"
                       :value="250"></el-option>
            <el-option :label="$t('logOperation.status2')"
                       :value="500"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model.trim="date"
                          type="datetimerange"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- v-if="$hasPermission('system:sysLogOperation:page')" -->
          <el-button type="primary"
                     @click="search()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('system:sysLogOperation:export')"
                     @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="clearData(7)">清除7天前数据</el-button>
          <el-button type="primary"
                     @click="clearData(30)">清除30天前数据</el-button>
          <el-button type="primary"
                     @click="clearData()">清除全部数据</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column prop="creatorName"
                         :label="$t('logOperation.creatorName')"
                         header-align="center"
                         align="center"
                         width="120">
          <template slot-scope="scope">
            <span @click="infoHandle(scope.row)">{{ scope.row.creatorName }}</span>
          </template></el-table-column>
        <el-table-column prop="operation"
                         :label="$t('logOperation.operation')"
                         header-align="center"
                         width="150"
                         :show-overflow-tooltip="true"
                         align="center"></el-table-column>
        <el-table-column prop="requestUri"
                         :label="$t('logOperation.requestUri')"
                         header-align="center"
                         width="150"
                         :show-overflow-tooltip="true"
                         align="center"></el-table-column>
        <el-table-column prop="requestMethod"
                         :label="$t('logOperation.requestMethod')"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="requestParams"
                         :label="$t('logOperation.requestParams')"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="requestBody"
                         :label="$t('logOperation.requestBody')"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="requestResult"
                         label="返回参数"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="requestTime"
                         :label="$t('logOperation.requestTime')"
                         sortable="custom"
                         header-align="center"
                         width="150"
                         align="center">
          <template slot-scope="scope">
            {{ `${scope.row.requestTime}` }}
          </template>
        </el-table-column>
        <el-table-column prop="status"
                         :label="$t('logOperation.status')"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0"
                    size="small"
                    type="success">{{ $t('logOperation.status0') }}</el-tag>
            <span v-else-if="scope.row.status === 250">
              <el-tag size="small"
                      type="warning">{{ $t('logOperation.status1') }}</el-tag>
              <span @click="infoHandle1(scope.row)"
                    style="margin-left: 10px;">原因</span>
            </span>
            <span v-else>
              <el-tag size="small"
                      type="danger">{{ $t('logOperation.status2') }}</el-tag>
              <span @click="infoHandle1(scope.row)"
                    style="margin-left: 10px;">原因</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="ip"
                         label="用户ip"
                         header-align="center"
                         align="center"
                         width="150"></el-table-column>
        <el-table-column prop="userAgent"
                         :label="$t('logOperation.userAgent')"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createDate"
                         :label="$t('logOperation.createDate')"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="180"></el-table-column>
      </el-table>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <el-dialog v-if="dialogVisible"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               class="user-dialog error-dialog"
               width="20%"
               :before-close="handleClose">
      <div class="msg">
        <div slot="title">
          <el-page-header @back="handleClose"
                          content="用户信息">
          </el-page-header>
        </div>
        <el-form v-if="this.dataForm1 !== undefined"
                 :model="dataForm1"
                 class="label-left-form"
                 v-loading="loading"
                 style="overflow: hidden;"
                 :element-loading-text="$t('loading')"
                 ref="dataForm"
                 label-position="left"
                 label-width="70px">
          <el-form-item prop="username"
                        label="账号：">
            <span>{{ dataForm1.username }}</span>
          </el-form-item>
          <el-form-item prop="realName"
                        label="姓名：">
            <span>{{ dataForm1.realName }}</span>
          </el-form-item>
          <el-form-item prop="deptName"
                        label="部门：">
            <span>{{ dataForm1.deptName }}</span>
          </el-form-item>
          <el-form-item prop="phone"
                        label="手机号：">
            <span>{{ dataForm1.phone }}</span>
          </el-form-item>
        </el-form>
        <el-empty v-else description="暂无信息"></el-empty>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogVisible1"
               :visible.sync="dialogVisible1"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               class="user-dialog error-dialog"
               width="20%"
               :before-close="handleClose1">
      <div class="msg">
        <div slot="title">
          <el-page-header @back="handleClose1"
                          content="错误信息">
          </el-page-header>
        </div>
        <span>{{ errorInfo }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/system/sysLogOperation/page',
        getDataListIsPage: true,
        exportURL: '/system/sysLogOperation/export'
      },
      dialogVisible: false,
      dialogVisible1: false,
      loading: true,
      errorInfo: '',
      date: '',
      dataForm: {
        status: ''
      },
      dataForm1: {}
    }
  },
  computed: {
    dataRule () {
      return {
        AL_creatorName: [
          { required: false, message: this.$t('validate.required'), trigger: 'change' },
          { min: 0, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        setTimeout(() => {
          this.isCode = val
        }, 100)
      }
    }
  },
  methods: {
    clearData (val) {
      if (val !== undefined) {
        this.$http.delete('/system/sysLogOperation/cleanLog', {
          day: val
        }).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.getDataList()
        })
      } else {
        this.$http.delete('/system/sysLogOperation/cleanLog').then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.getDataList()
        })
      }
    },
    infoHandle (info) {
      this.$http.get(`/system/sysUser/getUserPage?username=${info.creatorName}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.loading = false
        this.dataForm1 = res.data.data[0]
      })
      this.dialogVisible = true
    },
    infoHandle1 (val) {
      let info = JSON.parse(val.requestResult)
      this.errorInfo = info.msg
      this.dialogVisible1 = true
    },
    // 关闭弹窗
    handleClose () {
      this.dialogVisible = false
      this.dataForm1 = {}
      this.isCode = false
    },
    // 关闭弹窗
    handleClose1 () {
      this.dialogVisible1 = false
    },
    // 查询
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if (this.date !== null) {
            this.dataForm.startTime = this.date[0]
            this.dataForm.endTime = this.date[1]
          } else {
            this.dataForm.startTime = ''
            this.dataForm.endTime = ''
          }
          this.getPageInit()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-page-header {
  margin-bottom: 20px;
}

::deep.error-dialog .el-dialog__body {
  padding: 0 20px 20px 20px !important;
}</style>
